<style>
    .datetimepicker {
        display:none;!important;
    }
</style>
<div>
<form class="form-horizontal" method="post" ng-controller="searchServiceInfoCtrl" style="margin-top: 30px">
    <fieldset>
        <!--<legend>Add User</legend>-->
        <div class="form-group">
            <label class="col-sm-1 control-label">Service Type:</label>

            <div class="col-sm-2">
                <select class="form-control" ng-model="vm.serviceInfo.serviceType" ng-options="service for service in serviceTypeForSelect" ></select>
            </div>
            <label class="col-sm-1 control-label">Producer:</label>

            <div class="col-sm-2">
                <select class="form-control" ng-model="vm.serviceInfo.producer"
                        ng-options="domain for domain in domainList"></select>
            </div>
            <label class="col-sm-1 control-label">Consumer:</label>

            <div class="col-sm-2">
                <select class="form-control" ng-model="vm.serviceInfo.consumer"
                        ng-options="domain for domain in domainList"></select>
            </div>
            <label class="col-sm-1 control-label">Name:</label>

            <div class="col-sm-2">
                <input type="text" class="form-control" ng-model="vm.serviceInfo.detail">
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-2">
                <button type="button" class="btn btn-info" ng-click="vm.search()">Search</button>
            </div>
        </div>

    </fieldset>
</form>
</div>
<div style="margin-top: 30px">
    <div id="serviceInfoBox" ui-grid="vm.serviceInfoGrid"
         style="; height: 590px;width:1500px; text-align: left;margin: auto;"
         ui-grid-edit ui-grid-pagination
         ui-grid-selection ui-grid-exporter ui-grid-resize-columns ui-grid-auto-resize>
    </div>
</div>

<div id="deleteConfirm" class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-md" >
        <div class="modal-content">
            <div class="modal-header" style="background-color: green" id="deleteConfirmModalHeader">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title" id="deleteModalLabel">Delete Region Confirm</h4>
            </div>
            <div class="modal-body" style="height: 120px;">
                <div id="regionInfo" style="margin-left: 160px">
                    <h5>Do you sure want to delete?</h5>
                </div>
                <div>
                    <button id="cancelDelete" type="button" class="btn btn-warning btn-sm" style="margin-top: 20px; margin-left: 170px;" ng-click="vm.closeConfirmDeleteWindow()">Cancel</button>
                    <button id="confirmDelete" type="button" class="btn btn-danger btn-sm" style="margin-top: 20px; margin-left: 30px;" ng-click="vm.confirmDelete()">Delete</button>
                </div>
            </div>

        </div>
    </div>
</div>

<div id="serviceInfoEditModel" class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" >
        <div class="modal-content">
            <div class="modal-header" style="background-color: green" id="resultModalHead">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <h4 id="modalTitle" class="modal-title" id="myModalLabel">Create Service</h4>
            </div>
            <div class="modal-body" style="margin-left: 30px; margin-right: 30px; height: 500px">
                <div id="softwareInfo">
                    <div class="row" style="margin-top: 10px">
                        <h5>Service Type:</h5>
                        <input class="form-control" ng-model="vm.serviceType">
                    </div>
                    <div class="row" style="margin-top: 10px">
                        <h5>Producer:</h5>
                        <input  class="form-control" ng-model="vm.producer">
                    </div>
                    <div class="row" style="margin-top: 10px">
                        <h5>Consumer:</h5>
                        <input  class="form-control" ng-model="vm.consumer">
                    </div>
                    <div class="row" style="margin-top: 10px">
                        <h5>Service Name:</h5>
                        <input  class="form-control" ng-model="vm.detail">
                    </div>
                    <div class="row" style="margin-top: 10px">
                        <h5>Remark:</h5>
                        <input  class="form-control" ng-model="vm.remark">
                    </div>
                    <div>
                        <button id="saveBtn" type="button" ng-click="vm.confirmEditServiceInfo()" class="btn btn-primary btn-sm" style="float: right; margin-top: 25px">Save</button>
                    </div>
                    <div id="saveResult" style="text-align: center; margin-top: 30px">
                        <h5>{{vm.saveResult}}</h5>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>